<template>
    <div class="tmpl">
        <ul class="carlist" v-if='list'>
            <li v-for="(item,index) in list">
                <mt-switch class="switch" v-model='value[index].isCheck'></mt-switch>
                <img class="img" :src="item.thumb_path" alt="商品图片" height="75" width="75">
                <div class="inforight">
                    <h4 v-text="item.title"></h4>
                    <ul class="bottom">                
                        <li><span>￥{{item.sell_price}}</span></li>
                        <li><div><inputNumber :number='value[index].number' :goodsid='value[index].id'></inputNumber></div></li>
                        <li><span @click='delGoods(item.id)'>删除</span></li>                 
                    </ul>
                </div>
            </li>
        </ul>
        <div class="priceall">
            总共选中了：<span v-text='number'></span>件商品，总价是￥：<span v-text='price'></span>
        </div>
    </div>
</template>

<script>
    import {
        getItem,
        setItem,
        delGoods
    } from '../../kits/localSG.js';
    import common from '../../kits/common.js';
    import inputNumber from '../subcom/carinputNumber.vue';
    export default {
        components:{
            inputNumber
        },
        data() {
            return {
                list: [],
                value: [],
                number:0,
                price:0
            }
        },
        created() {
            this.getList(getItem());
           
        },
        methods: {
            getPrice(){
                var arr = [];
                var that = this;
                this.value.forEach((v,i)=>{
                    if(v.isCheck){
                        console.log(v);
                        console.log(v.number);
                        console.log(v['price']);
                        arr.push({'pirce':v.price,'num':v.number});
                    }
                });
                console.log(arr);
            },
            delGoods(id){
                delGoods(id);
                this.getList(getItem());
            },
            getList(arr) {
                var list = '';
                arr.forEach((v,i) => {
                    list += v.goodsid + ",";
                    this.value[i] = {};
                    this.value[i].isCheck = true;
                    this.value[i].id = v.goodsid;
                    this.value[i].number = v.count;
                })
                list = list.substring(0, list.length - 1);
                var url = common.apidomain + '/api/goods/getshopcarlist/' + list;
                this.$http.get(url).then(res => {
                    if (res.body.status != 0) {
                        alert(res.body.message);
                        return;
                    }
                    this.list = res.body.message;
                    this.list.forEach((v,i)=>{
                        this.value[i].price = v.sell_price;
                    })
                    this.getPrice();
                })
            }
        }
    }
</script>

<style scoped>

    .carlist > li{
        padding: 5px;
        list-style: none;
        height: 100px;
        border-bottom: 2px solid rgba(0, 0, 0, .3);
        display: flex;
    }
    .switch{
        flex: 0 0 52px;
    }
    .img{
        margin-left: 5px;
        height: 75px;
        width: 75px;
        flex: 0 0 75px;
    }
    .inforight{
        margin-left: 5px;
        flex: 1;
    }
    .inforight h4{
        color: #0099ff;
        font-size: 14px;
        height: 30px;
    }
    .bottom li{
        list-style: none;
        display: inline-block;
    }
    .bottom li:first-child{
        color: red;
        margin-right: 10px;
    }
    .bottom li:last-child{
        margin-left: 10px;
    }

</style>